<template>
  <n-card
    style="width: 400px"
    title="选择难度"
    :bordered="false"
    size="huge"
    role="dialog"
    aria-modal="true"
  >
    <div>
      <n-button type="primary" @click="changeDifficulty(9, 9, 10, '初级')" class="btn">
        初级（9x9 10个雷）
      </n-button>
    </div>
    <div>
      <n-button type="primary" @click="changeDifficulty(16, 16, 40, '中级')" class="btn">
        中级（16x16 40个雷）
      </n-button>
    </div>
    <div>
      <n-button type="primary" @click="changeDifficulty(16, 30, 99, '高级')" class="btn">
        高级（16x30 99个雷）
      </n-button>
    </div>

    <n-collapse>
      <n-collapse-item title="自定义">
        <div><input v-model="rownum" placeholder="输入行数" type="number" />行</div>
        <div><input v-model="colnum" placeholder="输入列数" type="number" />列</div>
        <div><input v-model="minenum" placeholder="输入雷的个数" type="number" />雷</div>
        <n-button type="primary" @click="changeDifficulty(rownum, colnum, minenum, '自定义')">
          确定
        </n-button>
      </n-collapse-item>
    </n-collapse>
  </n-card>
</template>

<script setup>
import { ref } from 'vue'
let rownum = ref()
let colnum = ref()
let minenum = ref()

let emit = defineEmits(['difficulty'])
function changeDifficulty(row, col, mine, levelName) {
  let gridTotal = row * col
  if (!gridTotal || gridTotal <= 9) {
    return alert('格子太少')
  }
  let max = gridTotal - 8
  if (mine >= max) {
    return alert('雷的数量应小于格子总数-8，即' + max)
  }

  let level = {
    rownum: row,
    colnum: col,
    minenum: mine,
    level: levelName
  }
  localStorage.level = JSON.stringify(level)
  emit('difficulty', level)
}
</script>

<style scoped>
.btn {
  width: 14em;
  margin-bottom: 10px;
}
input {
  margin: 0 10px 10px 0;
}
</style>
